import React from 'react';
import { Modal, Form, Radio, Input } from 'antd';
import { useEffect } from 'react';
const CreateModal = ({ visible, onCreate, onCancel, menuItem, status }) => {
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const initState = () => {
    const { name, type, url } = menuItem;
    form.setFieldsValue({
      name,
      type,
      url,
    });
  };
  useEffect(() => {
    if (status === 2 && visible) {
      initState();
    }
  }, [visible]);
  const titleMap = ['新增一级菜单', '新增', '编辑'];
  const typeOptions = [
    { label: '菜单', value: 1 },
    { label: '功能', value: 2 },
    { label: '按钮', value: 3 },
  ];
  return (
    <Modal
      visible={visible}
      title={titleMap[status]}
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      maskClosable={false}
      destroyOnClose
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        {...formItemLayout}
        name="form_in_modal"
        preserve={false}
      >
        <Form.Item
          label="类型"
          name="type"
          rules={[{ required: true, message: '请选择类型' }]}
        >
          <Radio.Group options={typeOptions} />
        </Form.Item>
        <Form.Item
          label="名称"
          name="name"
          rules={[{ required: true, message: '请输入名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item label="URL" name="url">
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateModal;
